<template>

  <a-modal v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width" :ok-text="LAYER.okText"
           :align-center="LAYER.alignCenter" :top="LAYER.top"
           :closable="LAYER.closable" :unmount-on-close="LAYER.unmountOnClose"
           :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose" :ok-loading="LAYER.okLoading"
           :on-before-ok="onSubmit" @cancel="onCancel()">

    <a-alert style="margin-bottom: 6px" type="info" :closable="false" :show-icon="false">会员当前金币余额:  {{props.record.coinBalance}}</a-alert>
    <a-form ref="formRef" :model="formState" :rules="RULES" auto-label-width layout="vertical">
      <a-row :gutter="12">
        <a-col :span="24">
          <a-form-item label="调整类型" field="event">
            <a-radio-group v-model="formState.event">
              <a-radio value="SHIPPING">赠送金额</a-radio>
              <a-radio value="DEDUCT">扣减金币</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="调整数量" field="quantity">
            <a-input-number :min="1" :max="1000000" v-model="formState.quantity" placeholder="调整数量"/>
          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="备注信息" field="remark">
            <a-textarea v-model="formState.remark" :max-length="200"/>
          </a-form-item>
        </a-col>


      </a-row>
    </a-form>

  </a-modal>

</template>
<script lang="ts" setup>

import {EditModal} from "@/libs/core";
import {SystemHttp} from "../resource/http";
import {CHANGE_COIN_EDIT} from '../resource/form'

const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])


const {member} = props.record
const {BODY, RULES} = CHANGE_COIN_EDIT
const config = {tplRecord: BODY, rawRecord: props.record, rowKey: 'id', emit}
const service = new EditModal(config).setAddRequest(SystemHttp.changeCoin);

const {formRef, formState, LAYER, onCancel, onSubmit} = service
const title = `${member?.nickName}【${member?.phoneNumber}】金币账户调整`
service.setMD(title, 600)
service.isUpdate = false
// eslint-disable-next-line vue/no-setup-props-destructure
service.formState.value.memberId = member.id

</script>

